import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {Subscription} from 'rxjs/Subscription';

@Component({
  selector: 'search-box',
  template: `
    <div class="header ui-col ui-col-1">
      <ul class="ui-row">
        <li class="ui-col ui-col-80 c-title"><input type="text" placeholder="输入要添加商品的名称或编号" name="keyword"></li>
        <li class="ui-col ui-col-20 t-right c-title" (click)="dialogRef.close({status:false})"><i>取消</i></li>
      </ul>
    </div>
  `,
  styles: [`
    .header{background: #ffffff;box-shadow: 1px 3px 2px #eeeeee;}
    .c-title{display: inline-block;}
    .c-title input{width: 98%;border: none;height: 30px;line-height: 30px;border-radius: 5px;background: url(../../../assets/img/search.png) 5px 5px no-repeat;background-color: #eeeeee;padding-left: 10%;}
    .c-title{height: 50px;line-height: 50px;font-size: 14px;padding-left: 10px;}
    .t-right{text-align: right;padding-right: 10px;}
  `]
})
export class SearchBoxComponent implements OnInit ,OnDestroy{


  @Input() searchServece:any;
  @Input() dialogRef:any;

  @Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() searchResult:EventEmitter<any[]>=new EventEmitter<any[]>();

  subscription: Subscription;
  constructor(
    private el:ElementRef,
  ) { }

  ngOnInit() {
    this.subscription = Observable.fromEvent(this.el.nativeElement,'keyup')//监听一个元素上的keyup事件 （事件将被转成流）
    // .filter((e:any)=>e.keyCode != 13)//enter 键不需要搜索，浪费资源  pc等一些业务情况可用
      .map((e:any)=>e.target.value)//提取input标签中的值 （由此这个流变成了字符串流）
      .filter((text:string)=>text.length>=0)//根据需要过滤字符串条件
      .debounceTime(888)//忽略触发时间间隔小于888ms的请求，即只有暂停输入888ms才回去请求，避免每次输入请求
      .do(()=>this.loading.next(true))//在流上执行do方法对事件执行函数，，但这种方式不会改变流中的任何数据
      .map((query:string)=>this.searchServece.search(query))//在每个触发的查询使用.map以执行搜索，
      .switch()//switch表示 除了最近的异常，忽略所有搜索事件，即会使用最新的搜索并丢弃其他搜索。
      .subscribe((data)=>{//订阅流
        // console.log(data);
        // console.log("搜索成功");
        this.loading.next(false);
        this.searchResult.next(data);
      },(error)=>{
        this.loading.next(false);
        console.error("搜索失败",error);
      },(completion)=>{
        this.loading.next(false);
        // console.log("搜索完成");
        // console.log(completion);
      })

  }
  ngOnDestroy(): void {
    if(this.subscription !== undefined){
      this.subscription.unsubscribe();
    }
  }
}
